<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="../../lib/vue2.js"></script>

    <style>
      .red {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <!-- 

    兄弟组件之间交流可以通过父组件作为中间人，先把信息给父组件，在由父组件给另一个子组件
    相当于  子->父->子
 -->

    <div id="box">
      <button @click="getMovieData">ajax获取数据</button>
      <info-area :mes="this.infoData"></info-area>
      <list-box :mylist="this.movieList" @myevent="handleEvent"></list-box>
    </div>

    <script>
      // 定义组件1：listBox
      Vue.component("listBox", {
        props: {
          mylist: {
            type: Array,
            default: [],
          },
        },

        template: `<div>
        <ul>
          <li v-for="item in mylist" :key="item.movieId">{{item.movieName}}<button @click="handleClick(item.movieName)">信息</button></li>
        </ul>
      </div>`,

        methods: {
          handleClick(name) {
            this.$emit("myevent", name + "--message from bro");
          },
        },
      });

      //   定义组件2：显示信息区
      Vue.component("infoArea", {
        props: {
          mes: {
            type: String,
            default: "暂无数据",
          },
        },
        template: `<div class="red">{{mes}}</div>`,
      });

      let vm = new Vue({
        el: "#box",

        data: {
          movieUrl: "http://localhost:3000/getdata",
          movieList: [],
          infoData: "",
        },

        methods: {
          handleEvent(data) {
            this.infoData = data;
          },

          getMovieData() {
            // 通过fetch获取数据
            fetch(this.movieUrl)
              .then((res) => {
                return res.json();
              })
              .then((res) => {
                // 此处处理获得的数据
                // console.log(res.movieList.list.movieInfo.movieName);
                this.movieList = res.movieList.list.map((item) => {
                  return item.movieInfo;
                });
              })
              .catch((err) => {
                console.log(err);
              });
          },
        },
      });
    </script>
  </body>
</html>
